<template>
  <div class="box">
    <h1 haha='1' erha='2'>我是根组件App</h1>
    <!-- 当前这种写法:传递props数据并非响应式的,说白了,属性值为固定的-->
    <!-- <Son money="10000000" car="法拉利"></Son>  -->
    <!-- 全套装备:父亲给数据可以,但是父亲的方法也得给 -->
    <Son :qian="money" v-bind:che="car" :hobby="[1,2,3,4,5]" :updateMoney="updateMoney"></Son>
    <Daughter  :renminbi="money"   :updateMoney="updateMoney"></Daughter>
  </div>
</template>


<script>
//引入子组件Son:@即为src文件夹别名
import Son from "@/components/Son";
import Daughter from "@/components/Daughter";
export default {
  //注册局部组件
  components: {
    Son,
    Daughter
  },
  //父组件响应式数据
  data() {
    return {
       money:100000000,
       car:'法拉利'
    }
  },
  methods: {
     //父亲的修改钱的方法
     updateMoney(){
       //使用父组件的方法,修改父组件自身的数据！！！
       this.money=100;
       //App父组件实例
       console.log('父组件',this)
      
     }
  },
};


</script>
<!--
    scoped:属性的作用,书写即为局部样式,只是当前组件里面DOM结构才会生效，对于其他组件没有任何影响！！！
    你不添加scoped属性,样式全局样式[全部的组件都会受到影响]
-->
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  background: cyan;
}
.box {
  width: 100%;
  height: 100%;
  background: yellowgreen;
}
</style>